<template>
  <div class="chart-item bg-white">
    <div class="padding font-large chart-item-title">{{ title }}</div>
    <v-chart :option="chartOption" :style="chartStyle"></v-chart>
  </div>
</template>

<script>
export default {
  name: 'bar-chart',
  props: {
    title: String,
    chartStyle: {
      type: [String, Object],
      default () {
        return 'width: 100%;height: 360px;'
      }
    },
    yaxisName: {
      type: String,
      default: '吨标准煤'
    },
    info: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  computed: {
    chartOption () {
      return {
        legend: {
          show: true,
          left: 'center',
          top: 'top',
        },
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [
            '1月', '2月', '3月', '4月', '5月', '6月',
            '7月', '8月', '9月', '10月', '11月', '12月'
          ]
        },
        yAxis: { type: 'value', name: this.yaxisName },
        series: Object.keys(this.info).sort().map(v => ({
          name: v,
          type: 'bar',
          data: [...this.info[v]]
        }))
      }
    }
  }
}
</script>

<style scoped>

</style>
